<template>
    <div class="main el-pd-20 el-mg-20 el-box-init el-bkgd-white">
        <!-- 操作按钮 -->
        <el-row class="table-btn el-pd-b-20">
            <el-button
                type="primary"
                :size="$btnSize"
                v-if="isAuth('SYS_MENU_ADD')"
                @click="onOpenWin('add')"
            >
                <i class="el-icon-plus"></i>
                新增
            </el-button>
        </el-row>

        <!-- 表格 -->
        <el-table
            :data="tableList"
            border
            stripe
            :size="$tableSize"
            row-key="id"
            :tree-props="{ children: 'childrens', hasChildren: 'hasChildren' }"
        >
            <el-table-column
                prop="name"
                label="名称"
                width="250"
            ></el-table-column>

            <el-table-column
                prop="path"
                label="路径"
                width="180px"
            ></el-table-column>

            <el-table-column prop="type" label="类型" width="100px">
                <template slot-scope="{ row }">
                    <span>{{ row.type | systemMenuTypeToStr }}</span>
                </template>
            </el-table-column>

            <el-table-column prop="code" label="权限  "></el-table-column>

            <el-table-column prop="api" label="API"></el-table-column>

            <el-table-column
                prop="sort"
                label="排序"
                width="60"
            ></el-table-column>

            <el-table-column
                label="操作"
                :width="$maxActionWidth"
                align="center"
                fixed="right"
            >
                <template slot-scope="{ row }">
                    <el-button
                        size="mini"
                        icon="el-icon-plus"
                        v-if="isAuth('SYS_MENU_ADD')"
                        @click="onOpenWin('addSub', row.id)"
                    >
                        新增子类
                    </el-button>
                    <el-button
                        size="mini"
                        type="primary"
                        icon="el-icon-edit"
                        v-if="isAuth('SYS_MENU_UPDATE')"
                        @click="onOpenWin('edit', row.id)"
                    >
                        编辑
                    </el-button>
                    <el-button
                        size="mini"
                        type="danger"
                        icon="el-icon-delete"
                        v-if="isAuth('SYS_MENU_DEL')"
                        @click="onDel(row.id)"
                    >
                        删除
                    </el-button>
                </template>
            </el-table-column>
        </el-table>

        <dialog-add-or-update
            ref="addRefs"
            :tableList="tableList"
            :tableType="tableType"
            :id="tableRowId"
        />
    </div>
</template>

<script>
import DialogAddOrUpdate from "./add-or-update.vue";
import { adminMenu as Api } from "api";

export default {
    components: {
        DialogAddOrUpdate,
    },
    data() {
        return {
            tableList: [],
            tableRowId: "",
            tableType: "",
        };
    },
    created() {
        this.getList();
    },
    methods: {
        async getList() {
            const { code, data } = await this.$axios.get(Api.getList);

            if (code === 200) {
                const menuList = this.$utils.getCategory(data);
                this.tableList = this.$utils.getChildrenTree(
                    menuList,
                    menuList[0]
                );
            }
        },
        onOpenWin(type, id) {
            if (type == "add") {
                this.tableRowId = "";
            } else {
                this.tableRowId = id;
            }

            this.tableType = type;

            // 通过ref打开弹窗组件内开关
            this.$refs.addRefs.visible = true;
        },

        async onDel(id) {
            // 确认删除
            const confirm = await this.$msgBox.confirm({
                cancel: true,
            });

            if (confirm) {
                const { code, msg } = await this.$axios.delete(Api.del, {
                    data: { id },
                });

                if (code === 200) {
                    this.$msg.success(msg);
                    this.getList();
                }
            }
        },
    },
};
</script>